<template>
	<view class="video-detail-container">
		<!-- 视频播放器 -->
		<view class="video-player-section">
			<video 
				:src="videoData.videoUrl" 
				:poster="videoData.cover"
				class="video-player"
				:controls="true"
				:autoplay="true"
				:loop="false"
				direction="0"
				object-fit="cover"
				@play="onVideoPlay"
				@pause="onVideoPause"
				@ended="onVideoEnded"
			></video>
		</view>

		<!-- 视频信息 -->
		<view class="video-info-section">
			<text class="video-title">{{ videoData.title }}</text>
			
			<view class="video-meta">
				<text class="view-count">{{ videoData.viewCount }} 次播放</text>
				<text class="publish-time">{{ videoData.publishTime }}</text>
			</view>

			<!-- 作者信息 -->
			<view class="author-section">
				<view class="author-info">
					<image class="author-avatar" :src="videoData.author.avatar" mode="aspectFill"></image>
					<view class="author-details">
						<text class="author-name">{{ videoData.author.name }}</text>
						<text class="author-fans">{{ videoData.author.fansCount }} 粉丝</text>
					</view>
				</view>
				<view class="author-actions">
					<view 
						class="follow-btn" 
						:class="{ followed: videoData.author.isFollowed }"
						@click="handleFollow(videoData.author.id)"
					>
						<text>{{ videoData.author.isFollowed ? '已关注' : '+ 关注' }}</text>
					</view>
				</view>
			</view>

			<!-- 视频描述 -->
			<view class="video-description" v-if="videoData.description">
				<text class="description-text">{{ videoData.description }}</text>
			</view>

			<!-- 互动操作 -->
			<view class="action-buttons">
				<view class="action-item" @click="handleLike(videoData.id)">
					<view class="action-icon" :class="{ liked: videoData.isLiked }">
						<text v-if="videoData.isLiked">❤️</text>
						<text v-else>🤍</text>
					</view>
					<text class="action-count">{{ videoData.likeCount }}</text>
				</view>
				
				<view class="action-item" @click="handleCollect(videoData.id)">
					<view class="action-icon" :class="{ collected: videoData.isCollected }">
						<text v-if="videoData.isCollected">⭐</text>
						<text v-else>☆</text>
					</view>
					<text class="action-count">{{ videoData.collectCount }}</text>
				</view>
				
				<view class="action-item" @click="showCommentInput = true">
					<text class="action-icon">💬</text>
					<text class="action-count">{{ videoData.commentCount }}</text>
				</view>
				
				<view class="action-item" @click="handleShare">
					<text class="action-icon">📤</text>
					<text class="action-count">{{ videoData.shareCount }}</text>
				</view>
			</view>
		</view>

		<!-- 评论区域 -->
		<view class="comments-section">
			<view class="section-header">
				<text class="section-title">评论</text>
				<text class="comment-count">{{ comments.length }} 条评论</text>
			</view>

			<!-- 评论列表 -->
			<view class="comment-list">
				<view 
					v-for="comment in comments" 
					:key="comment.id"
					class="comment-item"
				>
					<image class="comment-avatar" :src="comment.avatar" mode="aspectFill"></image>
					<view class="comment-content">
						<view class="comment-header">
							<text class="comment-author">{{ comment.author }}</text>
							<text class="comment-time">{{ comment.time }}</text>
						</view>
						<text class="comment-text">{{ comment.content }}</text>
						<view class="comment-actions">
							<view class="comment-action" @click="handleLikeComment(comment.id)">
								<text class="action-icon">{{ comment.isLiked ? '❤️' : '🤍' }}</text>
								<text class="action-text">{{ comment.likeCount }}</text>
							</view>
							<view class="comment-action" @click="handleReply(comment)">
								<text class="action-icon">↩️</text>
								<text class="action-text">回复</text>
							</view>
						</view>

						<!-- 回复列表 -->
						<view class="reply-list" v-if="comment.replies && comment.replies.length > 0">
							<view 
								v-for="reply in comment.replies" 
								:key="reply.id"
								class="reply-item"
							>
								<image class="reply-avatar" :src="reply.avatar" mode="aspectFill"></image>
								<view class="reply-content">
									<view class="reply-header">
										<text class="reply-author">{{ reply.author }}</text>
										<text class="reply-time">{{ reply.time }}</text>
									</view>
									<text class="reply-text">
										<text class="reply-to" v-if="reply.replyTo">@{{ reply.replyTo }}</text>
										{{ reply.content }}
									</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 加载更多 -->
			<view class="load-more" v-if="hasMoreComments" @click="loadMoreComments">
				<text class="load-more-text">加载更多评论</text>
			</view>
		</view>

		<!-- 为您推荐 -->
		<view class="recommend-section">
			<view class="section-header">
				<text class="section-title">为您推荐</text>
			</view>
			<view class="recommend-list">
				<view 
					v-for="video in recommendedVideos" 
					:key="video.id"
					class="recommend-item"
					@click="navigateToVideo(video.id)"
				>
					<image class="video-cover" :src="video.cover" mode="aspectFill"></image>
					<view class="video-info">
						<text class="video-title">{{ video.title }}</text>
						<text class="video-author">{{ video.author.name }}</text>
						<text class="video-stats">{{ video.viewCount }} 次播放 · {{ video.publishTime }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 评论输入框 -->
		<view class="comment-input-section" v-if="showCommentInput">
			<view class="input-container">
				<input 
					class="comment-input" 
					:placeholder="replyPlaceholder" 
					v-model="commentText" 
					:focus="showCommentInput"
					@blur="onInputBlur"
				/>
				<text class="send-btn" @click="submitComment">发送</text>
			</view>
		</view>

		<!-- 分享弹窗 -->
		<view class="modal-overlay" v-if="showShareModal" @click="hideShareModal">
			<view class="share-modal" @click.stop>
				<view class="modal-header">
					<text class="modal-title">分享到</text>
					<text class="modal-close" @click="hideShareModal">×</text>
				</view>
				<view class="share-platforms">
					<view class="platform-item" @click="shareToWechat">
						<view class="platform-icon wechat">微</view>
						<text class="platform-name">微信好友</text>
					</view>
					<view class="platform-item" @click="shareToMoment">
						<view class="platform-icon moment">朋</view>
						<text class="platform-name">朋友圈</text>
					</view>
					<view class="platform-item" @click="shareToQQ">
						<view class="platform-icon qq">Q</view>
						<text class="platform-name">QQ好友</text>
					</view>
					<view class="platform-item" @click="copyLink">
						<view class="platform-icon link">链</view>
						<text class="platform-name">复制链接</text>
					</view>
				</view>
				<view class="share-actions">
					<button class="cancel-btn" @click="hideShareModal">取消</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				videoData: {
					id: '',
					title: '',
					videoUrl: '',
					cover: '',
					description: '',
					viewCount: 0,
					likeCount: 0,
					collectCount: 0,
					commentCount: 0,
					shareCount: 0,
					publishTime: '',
					isLiked: false,
					isCollected: false,
					author: {
						id: '',
						name: '',
						avatar: '',
						fansCount: 0,
						isFollowed: false
					}
				},
				comments: [],
				recommendedVideos: [],
				showCommentInput: false,
				showShareModal: false,
				commentText: '',
				replyingTo: null,
				hasMoreComments: true,
				currentCommentPage: 1,
				commentPageSize: 10
			}
		},
		computed: {
			replyPlaceholder() {
				return this.replyingTo ? `回复 ${this.replyingTo.author}` : '写下你的评论...'
			}
		},
		onLoad(options) {
			if (options.videoId) {
				this.loadVideoData(options.videoId)
				this.loadComments(options.videoId)
				this.loadRecommendedVideos(options.videoId)
			}
		},
		methods: {
			// 加载视频数据
			async loadVideoData(videoId) {
				try {
					// 模拟API调用
					const result = await this.mockGetVideoDetail(videoId)
					if (result.success) {
						this.videoData = result.data
					}
				} catch (error) {
					console.error('加载视频详情失败:', error)
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					})
				}
			},

			// 加载评论列表
			async loadComments(videoId, page = 1) {
				try {
					const result = await this.mockGetComments(videoId, page)
					if (result.success) {
						if (page === 1) {
							this.comments = result.data
						} else {
							this.comments = [...this.comments, ...result.data]
						}
						this.hasMoreComments = result.hasMore
						this.currentCommentPage = page
					}
				} catch (error) {
					console.error('加载评论失败:', error)
				}
			},

			// 加载推荐视频
			async loadRecommendedVideos(videoId) {
				try {
					const result = await this.mockGetRecommendedVideos(videoId)
					if (result.success) {
						this.recommendedVideos = result.data
					}
				} catch (error) {
					console.error('加载推荐视频失败:', error)
				}
			},

			// 加载更多评论
			loadMoreComments() {
				this.loadComments(this.videoData.id, this.currentCommentPage + 1)
			},

			// 点赞视频
			async handleLike(videoId) {
				if (!this.checkLogin()) return

				try {
					if (this.videoData.isLiked) {
						await this.mockUnlikeVideo(videoId)
						this.videoData.isLiked = false
						this.videoData.likeCount--
					} else {
						await this.mockLikeVideo(videoId)
						this.videoData.isLiked = true
						this.videoData.likeCount++
					}
				} catch (error) {
					console.error('点赞操作失败:', error)
				}
			},

			// 收藏视频
			async handleCollect(videoId) {
				if (!this.checkLogin()) return

				try {
					if (this.videoData.isCollected) {
						await this.mockUncollectVideo(videoId)
						this.videoData.isCollected = false
						this.videoData.collectCount--
					} else {
						await this.mockCollectVideo(videoId)
						this.videoData.isCollected = true
						this.videoData.collectCount++
					}
				} catch (error) {
					console.error('收藏操作失败:', error)
				}
			},

			// 关注作者
			async handleFollow(authorId) {
				if (!this.checkLogin()) return

				try {
					if (this.videoData.author.isFollowed) {
						await this.mockUnfollowUser(authorId)
						this.videoData.author.isFollowed = false
						uni.showToast({
							title: '已取消关注',
							icon: 'success'
						})
					} else {
						await this.mockFollowUser(authorId)
						this.videoData.author.isFollowed = true
						uni.showToast({
							title: '关注成功',
							icon: 'success'
						})
					}
				} catch (error) {
					console.error('关注操作失败:', error)
				}
			},

			// 提交评论
			async submitComment() {
				if (!this.checkLogin()) return

				if (!this.commentText.trim()) {
					uni.showToast({
						title: '请输入评论内容',
						icon: 'none'
					})
					return
				}

				try {
					const result = await this.mockSubmitComment(
						this.videoData.id, 
						this.commentText, 
						this.replyingTo ? this.replyingTo.id : null
					)

					if (result.success) {
						// 如果是回复，添加到对应评论的回复列表
						if (this.replyingTo) {
							const parentComment = this.comments.find(c => c.id === this.replyingTo.id)
							if (parentComment) {
								if (!parentComment.replies) {
									parentComment.replies = []
								}
								parentComment.replies.unshift(result.data)
							}
						} else {
							// 新评论添加到评论列表顶部
							this.comments.unshift(result.data)
						}

						this.videoData.commentCount++
						this.commentText = ''
						this.replyingTo = null
						this.showCommentInput = false

						uni.showToast({
							title: '评论成功',
							icon: 'success'
						})
					}
				} catch (error) {
					console.error('评论失败:', error)
					uni.showToast({
						title: '评论失败',
						icon: 'none'
					})
				}
			},

			// 回复评论
			handleReply(comment) {
				this.replyingTo = comment
				this.showCommentInput = true
				this.commentText = ''
			},

			// 点赞评论
			async handleLikeComment(commentId) {
				if (!this.checkLogin()) return

				try {
					const comment = this.findCommentById(commentId)
					if (!comment) return

					if (comment.isLiked) {
						await this.mockUnlikeComment(commentId)
						comment.isLiked = false
						comment.likeCount--
					} else {
						await this.mockLikeComment(commentId)
						comment.isLiked = true
						comment.likeCount++
					}
				} catch (error) {
					console.error('点赞评论失败:', error)
				}
			},

			// 查找评论（包括回复）
			findCommentById(commentId) {
				// 在顶级评论中查找
				let comment = this.comments.find(c => c.id === commentId)
				if (comment) return comment

				// 在回复中查找
				for (let parentComment of this.comments) {
					if (parentComment.replies) {
						comment = parentComment.replies.find(r => r.id === commentId)
						if (comment) return comment
					}
				}
				return null
			},

			// 分享相关方法
			handleShare() {
				this.showShareModal = true
			},

			hideShareModal() {
				this.showShareModal = false
			},

			shareToWechat() {
				this.performShare('wechat')
			},

			shareToMoment() {
				this.performShare('moment')
			},

			shareToQQ() {
				this.performShare('qq')
			},

			copyLink() {
				const link = `https://example.com/video/${this.videoData.id}`
				uni.setClipboardData({
					data: link,
					success: () => {
						this.videoData.shareCount++
						uni.showToast({
							title: '链接已复制',
							icon: 'success'
						})
						this.hideShareModal()
					}
				})
			},

			performShare(platform) {
				// 模拟分享逻辑
				this.videoData.shareCount++
				uni.showToast({
					title: '分享成功',
					icon: 'success'
				})
				this.hideShareModal()
			},

			// 跳转到其他视频
			navigateToVideo(videoId) {
				uni.redirectTo({
					url: `/pages/video-detail/video-detail?videoId=${videoId}`
				})
			},

			// 视频播放事件
			onVideoPlay() {
				console.log('视频开始播放')
			},

			onVideoPause() {
				console.log('视频暂停')
			},

			onVideoEnded() {
				console.log('视频播放结束')
			},

			onInputBlur() {
				// 输入框失去焦点时，如果不是在回复状态，隐藏输入框
				if (!this.commentText && !this.replyingTo) {
					this.showCommentInput = false
				}
			},

			// 检查登录状态
			checkLogin() {
				const token = uni.getStorageSync('token')
				if (!token) {
					uni.showModal({
						title: '提示',
						content: '请先登录',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/Login/Login'
								})
							}
						}
					})
					return false
				}
				return true
			},

			// 模拟API方法
			mockGetVideoDetail(videoId) {
				return new Promise((resolve) => {
					setTimeout(() => {
						resolve({
							success: true,
							data: {
								id: videoId,
								title: '美丽的风景视频，带你感受大自然的魅力',
								videoUrl: '/static/videos/sample.mp4',
								cover: '/static/video-covers/cover1.jpg',
								description: '这是视频的详细描述，可以包含更多的信息和使用说明。分享美好的旅行时光，记录生活中的每一个精彩瞬间。',
								viewCount: 12560,
								likeCount: 856,
								collectCount: 234,
								commentCount: 189,
								shareCount: 67,
								publishTime: '2024-01-15',
								isLiked: false,
								isCollected: false,
								author: {
									id: 'author-001',
									name: '旅行达人小明',
									avatar: '/static/authors/author1.png',
									fansCount: 12500,
									isFollowed: false
								}
							}
						})
					}, 500)
				})
			},

			mockGetComments(videoId, page = 1) {
				return new Promise((resolve) => {
					setTimeout(() => {
						const comments = [
							{
								id: 1,
								author: '用户小明',
								avatar: '/static/users/user1.png',
								content: '这个视频太棒了！风景真的很美，拍摄技术也很专业！',
								time: '2小时前',
								likeCount: 24,
								isLiked: false,
								replies: [
									{
										id: 11,
										author: '视频作者',
										avatar: '/static/authors/author1.png',
										content: '谢谢你的喜欢！我会继续努力创作更多优质内容',
										time: '1小时前',
										likeCount: 8,
										isLiked: false,
										replyTo: '用户小明'
									}
								]
							},
							{
								id: 2,
								author: '摄影爱好者',
								avatar: '/static/users/user2.png',
								content: '请问是用什么设备拍摄的？画质真的很清晰！',
								time: '3小时前',
								likeCount: 18,
								isLiked: true
							}
						]
						resolve({
							success: true,
							data: page === 1 ? comments : [],
							hasMore: page < 2
						})
					}, 300)
				})
			},

			mockGetRecommendedVideos(videoId) {
				return new Promise((resolve) => {
					setTimeout(() => {
						resolve({
							success: true,
							data: [
								{
									id: 'video-002',
									title: '城市夜景延时摄影',
									cover: '/static/video-covers/cover2.jpg',
									author: { name: '城市摄影师' },
									viewCount: 8560,
									publishTime: '1天前'
								},
								{
									id: 'video-003',
									title: '美食制作教程',
									cover: '/static/video-covers/cover3.jpg',
									author: { name: '美食博主' },
									viewCount: 12500,
									publishTime: '2天前'
								},
								{
									id: 'video-004',
									title: '宠物搞笑合集',
									cover: '/static/video-covers/cover4.jpg',
									author: { name: '宠物达人' },
									viewCount: 25600,
									publishTime: '3天前'
								}
							]
						})
					}, 400)
				})
			},

			mockLikeVideo(videoId) {
				return new Promise((resolve) => {
					setTimeout(() => resolve({ success: true }), 200)
				})
			},

			mockUnlikeVideo(videoId) {
				return new Promise((resolve) => {
					setTimeout(() => resolve({ success: true }), 200)
				})
			},

			mockCollectVideo(videoId) {
				return new Promise((resolve) => {
					setTimeout(() => resolve({ success: true }), 200)
				})
			},

			mockUncollectVideo(videoId) {
				return new Promise((resolve) => {
					setTimeout(() => resolve({ success: true }), 200)
				})
			},

			mockFollowUser(userId) {
				return new Promise((resolve) => {
					setTimeout(() => resolve({ success: true }), 200)
				})
			},

			mockUnfollowUser(userId) {
				return new Promise((resolve) => {
					setTimeout(() => resolve({ success: true }), 200)
				})
			},

			mockSubmitComment(videoId, content, replyTo = null) {
				return new Promise((resolve) => {
					setTimeout(() => {
						resolve({
							success: true,
							data: {
								id: Date.now(),
								author: '当前用户',
								avatar: '/static/current-user.png',
								content: content,
								time: '刚刚',
								likeCount: 0,
								isLiked: false,
								replyTo: replyTo ? this.replyingTo?.author : null
							}
						})
					}, 300)
				})
			},

			mockLikeComment(commentId) {
				return new Promise((resolve) => {
					setTimeout(() => resolve({ success: true }), 200)
				})
			},

			mockUnlikeComment(commentId) {
				return new Promise((resolve) => {
					setTimeout(() => resolve({ success: true }), 200)
				})
			}
		}
	}
</script>

<style scoped>
	.video-detail-container {
		background: #f5f5f5;
		min-height: 100vh;
		padding-bottom: 120rpx;
	}

	/* 视频播放器区域 */
	.video-player-section {
		background: #000;
	}

	.video-player {
		width: 100%;
		height: 420rpx;
	}

	/* 视频信息区域 */
	.video-info-section {
		background: white;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.video-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		line-height: 1.4;
		margin-bottom: 20rpx;
		display: block;
	}

	.video-meta {
		display: flex;
		align-items: center;
		gap: 30rpx;
		margin-bottom: 30rpx;
	}

	.view-count,
	.publish-time {
		font-size: 26rpx;
		color: #666;
	}

	/* 作者信息 */
	.author-section {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 25rpx;
	}

	.author-info {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.author-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.author-details {
		display: flex;
		flex-direction: column;
	}

	.author-name {
		font-size: 30rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 8rpx;
	}

	.author-fans {
		font-size: 24rpx;
		color: #666;
	}

	.follow-btn {
		padding: 12rpx 24rpx;
		background: #007AFF;
		color: white;
		border-radius: 20rpx;
		font-size: 24rpx;
		font-weight: 500;
	}

	.follow-btn.followed {
		background: #f0f0f0;
		color: #666;
	}

	/* 视频描述 */
	.video-description {
		margin-bottom: 30rpx;
	}

	.description-text {
		font-size: 28rpx;
		color: #666;
		line-height: 1.5;
	}

	/* 互动按钮 */
	.action-buttons {
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 20rpx 0;
	}

	.action-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.action-icon {
		font-size: 44rpx;
		margin-bottom: 8rpx;
		transition: all 0.3s;
	}

	.action-icon.liked {
		color: #ff0000;
	}

	.action-icon.collected {
		color: #ffd700;
	}

	.action-count {
		font-size: 22rpx;
		color: #666;
	}

	/* 评论区域 */
	.comments-section,
	.recommend-section {
		background: white;
		margin-top: 20rpx;
		padding: 30rpx;
	}

	.section-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.comment-count {
		font-size: 26rpx;
		color: #666;
	}

	/* 评论列表 */
	.comment-list {
		margin-bottom: 30rpx;
	}

	.comment-item {
		display: flex;
		padding: 25rpx 0;
		border-bottom: 1rpx solid #f8f8f8;
	}

	.comment-avatar {
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	.comment-content {
		flex: 1;
	}

	.comment-header {
		display: flex;
		align-items: center;
		margin-bottom: 12rpx;
	}

	.comment-author {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
		margin-right: 20rpx;
	}

	.comment-time {
		font-size: 24rpx;
		color: #999;
	}

	.comment-text {
		font-size: 28rpx;
		color: #333;
		line-height: 1.5;
		margin-bottom: 16rpx;
		display: block;
	}

	.comment-actions {
		display: flex;
		align-items: center;
	}

	.comment-action {
		display: flex;
		align-items: center;
		margin-right: 30rpx;
	}

	.comment-action .action-icon {
		font-size: 24rpx;
		margin-right: 8rpx;
		margin-bottom: 0;
	}

	.comment-action .action-text {
		font-size: 22rpx;
		color: #666;
	}

	/* 回复列表 */
	.reply-list {
		margin-top: 20rpx;
		padding-left: 20rpx;
		border-left: 2rpx solid #f0f0f0;
	}

	.reply-item {
		display: flex;
		padding: 15rpx 0;
	}

	.reply-avatar {
		width: 48rpx;
		height: 48rpx;
		border-radius: 50%;
		margin-right: 15rpx;
		flex-shrink: 0;
	}

	.reply-content {
		flex: 1;
	}

	.reply-header {
		display: flex;
		align-items: center;
		margin-bottom: 8rpx;
	}

	.reply-author {
		font-size: 26rpx;
		color: #333;
		font-weight: 500;
		margin-right: 15rpx;
	}

	.reply-time {
		font-size: 22rpx;
		color: #999;
	}

	.reply-text {
		font-size: 26rpx;
		color: #666;
		line-height: 1.4;
	}

	.reply-to {
		color: #007AFF;
		margin-right: 8rpx;
	}

	/* 加载更多 */
	.load-more {
		text-align: center;
		padding: 30rpx;
	}

	.load-more-text {
		font-size: 28rpx;
		color: #007AFF;
	}

	/* 推荐视频 */
	.recommend-list {
		display: flex;
		flex-direction: column;
		gap: 25rpx;
	}

	.recommend-item {
		display: flex;
	}

	.video-cover {
		width: 200rpx;
		height: 150rpx;
		border-radius: 12rpx;
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	.recommend-item .video-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.recommend-item .video-title {
		font-size: 28rpx;
		font-weight: 500;
		margin-bottom: 10rpx;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.recommend-item .video-author {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 8rpx;
	}

	.recommend-item .video-stats {
		font-size: 22rpx;
		color: #999;
	}

	/* 评论输入框 */
	.comment-input-section {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: white;
		padding: 20rpx 30rpx;
		border-top: 1rpx solid #f0f0f0;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.input-container {
		display: flex;
		align-items: center;
		background: #f8f9fa;
		border-radius: 30rpx;
		padding: 16rpx 24rpx;
	}

	.comment-input {
		flex: 1;
		font-size: 28rpx;
		color: #333;
	}

	.send-btn {
		color: #007AFF;
		font-size: 28rpx;
		font-weight: 500;
		margin-left: 20rpx;
	}

	/* 分享弹窗 */
	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: flex-end;
		z-index: 9999;
	}

	.share-modal {
		background: white;
		width: 100%;
		border-radius: 24rpx 24rpx 0 0;
	}

	.modal-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 32rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.modal-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	.modal-close {
		font-size: 40rpx;
		color: #999;
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.share-platforms {
		display: flex;
		justify-content: space-around;
		padding: 40rpx 32rpx;
	}

	.platform-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.platform-icon {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		color: white;
		margin-bottom: 16rpx;
	}

	.platform-icon.wechat { background: #07C160; }
	.platform-icon.moment { background: #7CD300; }
	.platform-icon.qq { background: #12B7F5; }
	.platform-icon.link { background: #007AFF; }

	.platform-name {
		font-size: 24rpx;
		color: #666;
	}

	.share-actions {
		padding: 0 32rpx 32rpx;
	}

	.cancel-btn {
		width: 100%;
		background: #f8f9fa;
		color: #333;
		border: none;
		border-radius: 12rpx;
		padding: 24rpx;
		font-size: 28rpx;
	}

	.cancel-btn::after {
		border: none;
	}
</style>